<template>
  <div class="nearby">
    <Nav :backTitle="location.campusName" />
    <div id="container"></div>
    <footer>
      <h4>
        {{location.campusName}}
      </h4>
      <p class="location">
        {{location.address}}&nbsp;&nbsp;&nbsp;
        <span class="distance">距离您{{location.distance | formatNumber(0)}}m</span>
      </p>
    </footer>
  </div>
</template>

<script>
import api from 'util/xhr'
import Nav from 'components/nav/nav.vue'
import global from 'util/global'

export default {
  name: 'nearby',
  components: {
    Nav
  },
  data: function() {
    return {
      title: '提示',
      location: {},
      centreLongitude: '',
      centreLatitude: ''
    }
  },
  created() {
    global.getCurrentPosition(location => {
      // console.log("xx",location)
      this.centreLongitude = location.longitude
      this.centreLatitude = location.latitude
    })
    this.location = JSON.parse(this.$route.query.location)
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 附近距离
      this.$nextTick(() => {
        var DISTANCE = 5000
        var map = new BMap.Map('container')

        // var longitude = sessionStorage.getItem('longitude') || this.centreLongitude||this.location.geoLocation.split(' ')[0]
        // var latitude = sessionStorage.getItem('latitude') || this.centreLatitude||this.location.geoLocation.split(' ')[1]
        var longitude =
          this.location.geoLocation.split(' ')[0] ||
          sessionStorage.getItem('longitude') ||
          this.centreLongitude
        var latitude =
          this.location.geoLocation.split(' ')[1] ||
          sessionStorage.getItem('latitude') ||
          this.centreLatitude

        var point = new BMap.Point(longitude, latitude)

        map.centerAndZoom(point, 14)
        map.addControl(new BMap.NavigationControl())
        let campusPoint = {
          title: this.location.campusName,
          address: this.location.address,
          point: this.location.geoLocation.split(' ').join(','),
          tel: this.location.phoneNo
        }

        function addMarker(point) {
          var myIcon = new BMap.Icon(
            'https://api.map.baidu.com/img/markers.png',
            new BMap.Size(23, 25),
            {
              offset: new BMap.Size(10, 25),
              imageOffset: new BMap.Size(0, 0 - 11 * 25)
            }
          )
          var marker = new BMap.Marker(point, { icon: myIcon })
          map.addOverlay(marker)
          return marker
        }

        // 添加信息窗口
        function addInfoWindow(marker, poi) {
          //pop弹窗标题
          var title =
            '<div style="font-weight:bold;color:#CE5521;font-size:14px">' +
            poi.title +
            '</div>'
          //pop弹窗信息
          var html = []
          html.push(
            '<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>'
          )
          html.push('<tr>')
          html.push(
            '<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>'
          )
          html.push(
            '<td style="vertical-align:top;line-height:16px">' +
              poi.address +
              ' </td>'
          )
          html.push('</tr>')
          html.push('</tbody></table>')
          var infoWindow = new BMap.InfoWindow(html.join(''), {
            title: title,
            width: 200
          })

          var openInfoWinFun = function() {
            marker.openInfoWindow(infoWindow)
          }
          marker.addEventListener('click', openInfoWinFun)
          document.querySelector(`.to-map${0}`).onClick = () => {
            openInfoWinFun()
          }
          return openInfoWinFun
        }
        var p0 = campusPoint.point.split(',')[0]
        var p1 = campusPoint.point.split(',')[1]
        var maker = addMarker(new window.BMap.Point(p0, p1))
        addInfoWindow(maker, campusPoint)
      })
    }
  }
}
</script>

<style scoped lang="less">
.nearby {
  height: 100%;
}

#container {
  position: absolute;
  top: 110px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}

footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 30px;
  background-color: #fff;
}
footer h4 {
  font-size: 28px;
  /* margin-bottom: 1.5rem; */
  display: flex;
  justify-content: space-between;
}
footer .distance {
  color: #ee0000;
  font-size: 20px;
}
.location {
  font-size: 32px;
  line-height: 1.5;
  /* margin-bottom: 1rem; */
}
.tel-num {
  color: #999;
  font-size: 28px;
  //   line-height: 4rem;
  padding-left: 15px;
}
</style>
